<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/main.css">
<style>
.green {
	color: green;
}

.red {
	color: red;
}

.low-stock {
	color: red;
}
</style>
</head>
<body>
	<div id="app">
		<div id="table" class="mt10">
			<div class="box span10 oh">
				<table width="100%" border="0" cellpadding="0" cellspacing="0"
					class="list_table">
					<thead>
						<tr>
							<th width="80">编号</th>
							<th width="100">类别</th>
							<th width="100">名称</th>
							<th width="120">图片</th>
							<th width="120">价格</th>
							<th width="120">描述</th>
							<th width="120">库存</th>
							<th width="120">状态</th>
						</tr>
					</thead>
					<tbody id="goods_info" align="center">
						<tr v-for="item in paginatedData" :key="item.gid">
							<td>{{ item.gid }}</td>
							<td>{{ item.tname }}</td>
							<td>{{ item.gname }}</td>
							<td><img :src="item.gpic.split(',')[0]" alt="Product Image"
								:style="{ width: '50px', height: 'auto' }" /></td>
							<td>{{ item.gprice }}元</td>
							<td>{{ item.ginfo }}</td>
							<td><span :class="{ 'low-stock': item.gblance < 10 }">{{
									item.gblance }}</span></td>
							<td class="green" v-if="item.gstatus == 1">上架</td>
							<td class="red" v-else>下架</td>
						</tr>
					</tbody>
				</table>
				<div class="pagination">
					<ul>
						<li class="first-child" @click="paginate(1)"
							:class="{ active: currentPage === 1 }"><a
							href="javascript:void(0)">首页</a></li>
						<li v-for="page in pages" :key="page" @click="paginate(page)"
							:class="{ active: currentPage === page }"><a
							href="javascript:void(0)">{{ page }}</a></li>
						<li class="last-child" @click="paginate(totalPages)"
							:class="{ active: currentPage === totalPages }"><a
							href="javascript:void(0)">末页</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<script src="../js/vue.js"></script>
	<script src="../js/axios.js"></script>
	<script>  
    let app = new Vue({  
        el: '#app',  
        data: {  
            goodsInfo: [],  
	 		currentPage: 1,  
     		pageSize: 10,
		},
		
		computed: {  
		    paginatedData() {  
		      const start = (this.currentPage - 1) * this.pageSize;  
		      const end = start + this.pageSize;  
		      return this.goodsInfo.slice(start, end);  
		    },  
		    totalPages() {  
		      return Math.ceil(this.goodsInfo.length / this.pageSize);  
		    },  
		    pages() {  
		      const startPage = Math.max(1, this.currentPage - 2);  
		      const endPage = Math.min(this.totalPages, this.currentPage + 2);  
		      return Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);  
		    },  
		  }, 
   
	        methods: {  
	            getGoodsInfos() {  
	            	return axios.get("../../goods/selectbackgoodsinfo", {   
	                }).then(resp => {  
	                	if (resp.status !== 200) {  
	                        throw new Error('HTTP response was not OK');  
	                      }  
	                      this.goodsInfo = resp.data;
	                });  
	            },
	            
	    	    paginate(page) {  
	  		      if (page >= 1 && page <= this.totalPages) {  
	  		        this.currentPage = page;  
	  		      }  
	  		    },
			},
			
		mounted(){
			this.getGoodsInfos().then(() => {  
		        const lowStockItems = this.goodsInfo.filter(item => item.gblance < 10);  
		        if (lowStockItems.length > 0) {  
		            alert('存在库存低于10的商品，请及时处理！');  
		        }  
		    })  
		}
	})
</script>
</body>
</html>